<template>

<div class="all">
  <div class="back1"><span class="el-icon-back" @click=" Home1()">首页</span></div>
  <div class="Search">
    
     <el-row :gutter="20">
      <el-col :span="16">
      </el-col>
     </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="change">美好生活每一天</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form :rules="rules" :model="text_From">
          <el-form-item label="搜索：" prop="text">
            <el-input placeholder="中国" @keyup.enter.native="search" v-model="text_From.text" class="input-with-select">
              <el-button  slot="append"  icon="el-icon-search"  @click="search_text()" ></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-row type="flex" justify="center">
          <el-avatar
            src="https://img2.baidu.com/it/u=1756968792,1852803643&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          ></el-avatar>
        </el-row>
        <el-row type="flex" justify="center">......</el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
      </el-col>
      <el-col :span="8">
       <!-- <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件,且不超过500kb
          </div>
        </el-upload>-->
         <input type="file" name="file" @change="showFile($event)" /> 
      </el-col>
    </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
            <el-input type="textarea" :rows="12" placeholder="NER:" v-model="textarea1">
            </el-input>
        </el-col>
        <el-col :span="12">
            <el-input type="textarea" :rows="12" placeholder="RE:" v-model="textarea2" >
            </el-input>
        </el-col>
      </el-row>
  </div>
</div>
</template>

<script>
export default {
  name: "SearchOne",
  data() {


    return {
      state1: '',
      baseURL: "http://127.0.0.1:8000/",
        textarea1: [],
        textarea2: [],
      text_From: {
        text: "",
      },
      tags: [
        { name: "中国", type: "" },
        { name: "美国", type: "success" },
        { name: "日本", type: "info" },
        { name: "韩国", type: "warning" },
        { name: "英国", type: "danger" },
      ],
      rules: {
        //限制只可输入文字
        text: [
          { required: true, message: "输入文本不能为空", triggler: "blur" },

        ],
      },
    };
  },
  methods: {
    Home1(){
      this.$router.push('/');
    },
    clickTag(tag) {
      this.text_From.text = tag.name;
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    clearHistory() {
      this.tags = [];
    },
    search() {
      this.tags.unshift({ name: this.text_From.text, type: "" });
    },
    //提取文件中的数据
    showFile(input) {
        this.state1=''
        this.textarea1=[]
        this.textarea2=[]
        //支持chrome IE10
        if (window.FileReader) {
          var file = input.target.files[0];
          var reader = new FileReader();
          reader.onload=((event)=>{
            //显示文件
            this.text_From.text=event.target.result;
            console.log(event.target.result)
          })
          console.info(file)
          console.info(reader);
          reader.readAsText(file);
        }
        else {
          alert("FileReader Not supported by your browser!");
        }
      },
    //对用户输入的处理
    search_text() {
      let that = this;
      this.$axios
        .post(this.baseURL + "search_text_1/", {
          text:that.text_From.text//数据框的值传给后端
        })
        .then((res) => {
          if (res.data.code === 1) {
            that.textarea1 = res.data.text;
            that.textarea2 = res.data.text2;
            console.log(that.textarea1);
            console.log(that.textarea2);
          } else {
            that.$message.error("后台数据异常");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.all{
  
 background-image:url('./imag/4.jpg');
   background-size: 100% 100%;
  height: 100%;
  position: fixed;
    width: 100%

}
.change {
  text-align: center;
  font-size: 25px;
  color: rgb(224, 207, 25);
}
.el-row {
  margin-bottom: 20px;
}
.back1{
  color: #147ef0;
  margin: 10px 10px 10px 10px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.history-tag {
  margin: 20px;
}
</style>
